<template>
  <tn-popup mode="center" v-model="isRechargeModalVisible" maskCloseable :customStyle="{borderRadius: '20rpx'}" backgroundColor="transparent">
    <view class="recharge-modal" :class="{'show-modal': isRechargeModalVisible}">
      <view class="recharge-header">
        <view class="recharge-title">金币充值</view>
        <view class="recharge-close" @tap="closeRechargeModal">
          <text class="tn-icon-close"></text>
        </view>
      </view>
      <view class="recharge-content">
        <!-- 当前金币显示 -->
        <view class="coins-status" :class="{'slide-in': isRechargeModalVisible}">
          <view class="coins-status-card">
            <view class="coins-icon">
              <text class="tn-icon-gift coin-spin"></text>
            </view>
            <view class="coins-info">
              <view class="coins-label">当前金币</view>
              <view class="coins-value">{{ userInfo.coins || 0 }}</view>
            </view>
          </view>
        </view>
        
        <!-- 充值套餐选项 -->
        <view class="recharge-plans">
          <view 
            class="recharge-plan" 
            v-for="(plan, key, index) in rechargePlans" 
            :key="key"
            :class="{ 'selected': selectedPlan === key, 'recommended': defaultPlan === key, 'newcomer': key === 'small' }" 
            @tap="selectPlan(key)"
            :style="{'animation-delay': index * 0.1 + 's'}"
          >
            <view class="plan-info">
              <view class="plan-coins">
                <text class="coins-num">{{ plan.coins }}</text>
                <text class="coins-unit">金币</text>
              </view>
              <view class="plan-price">¥{{ plan.price }}</view>
            </view>
            <view class="plan-bonus shine" v-if="plan.bonus > 0">送{{ plan.bonus }}</view>
            <view class="recommend-tag" v-if="defaultPlan === key">热门</view>
            <view class="newcomer-tag" v-if="key === 'small'">新人专享</view>
          </view>
        </view>
        
        <!-- 确认支付按钮 -->
        <view class="recharge-btn-wrapper" :class="{'slide-up': isRechargeModalVisible}">
          <view class="recharge-btn" :class="{'btn-shine': isButtonAnimating}" @tap="confirmRecharge">
            {{ getButtonText() }}
          </view>
          
          <!-- 气泡提示 -->
          <view class="price-bubble bounce-in" v-if="rechargePlans[selectedPlan] && rechargePlans[selectedPlan].bonus > 0">
            <view class="bubble-text">
              赠送{{ rechargePlans[selectedPlan].bonus }}金币
              <view class="sparkle-wrapper">
                <text class="sparkle-star">✨</text>
              </view>
            </view>
            <view class="bubble-arrow"></view>
          </view>
          
          <view class="terms fade-in">
            <text>点击支付即表示同意</text>
            <text class="terms-link" @tap="showTerms">《充值协议》</text>
          </view>
        </view>
      </view>
    </view>
  </tn-popup>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'coin-recharge-popup',
  props: {
    // 控制弹窗显示
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isRechargeModalVisible: false,
      selectedPlan: 'medium', // 默认选择中等金额
      defaultPlan: 'medium', // 推荐的套餐
      isButtonAnimating: false, // 控制按钮动画状态
      
      // 充值套餐数据
      rechargePlans: {
        small: {
          coins: 50,
          price: 1,
          bonus: 10
        },
        medium: {
          coins: 300,
          price: 30,
          bonus: 30
        },
        large: {
          coins: 500,
          price: 50,
          bonus: 80
        },
        huge: {
          coins: 1000,
          price: 100,
          bonus: 200
        }
      }
    }
  },
  computed: {
    // 从store获取用户信息
    ...mapState({
      // 用户信息
      storeUserInfo: state => state.user.userInfo
    }),
    
    // 转换用户信息，确保包含所需的字段
    userInfo() {
      return {
        // 从store获取用户信息
        ...this.storeUserInfo,
        // 确保有coins字段
        coins: this.storeUserInfo?.coins || 0
      }
    }
  },
  watch: {
    // 监听props中的show变化
    show(newVal) {
      this.isRechargeModalVisible = newVal;
    },
    // 监听弹窗状态变化
    isRechargeModalVisible(newVal) {
      if (!newVal && this.show) {
        this.$emit('update:show', false);
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeRechargeModal() {
      this.isRechargeModalVisible = false;
      this.$emit('update:show', false);
      this.$emit('cancel');
    },
    
    // 选择充值套餐
    selectPlan(plan) {
      this.selectedPlan = plan;
      // 触发按钮闪光动画
      this.triggerButtonAnimation();
      // 触发短震动反馈
      this.triggerVibration();
    },
    
    // 触发震动反馈
    triggerVibration() {
      // 调用系统短震动
      uni.vibrateShort({
        success: function () {
          console.log('震动反馈触发成功');
        },
        fail: function(err) {
          console.log('震动反馈触发失败', err);
        }
      });
    },
    
    // 触发按钮动画
    triggerButtonAnimation() {
      this.isButtonAnimating = true;
      // 动画结束后重置状态，以便下次可以再次触发
      setTimeout(() => {
        this.isButtonAnimating = false;
      }, 1000);
    },
    
    // 获取按钮文本
    getButtonText() {
      const plan = this.rechargePlans[this.selectedPlan];
      if (!plan) {
        return '请选择充值金额';
      }
      
      return `立即支付 ¥${plan.price}`;
    },
    
    // 确认充值
    confirmRecharge() {
      // 获取当前选择的套餐
      const plan = this.rechargePlans[this.selectedPlan];
      
      // 显示加载状态
      uni.showLoading({
        title: '支付处理中...'
      });
      
      // 这里应该是实际的支付处理逻辑，目前模拟支付过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 模拟支付成功
        // 在实际项目中，这里应该调用后端API进行真实支付处理
        const paymentResult = true;
        
        if (paymentResult) {
          // 支付成功
          // 更新用户金币数量（实际项目中应该由后端更新）
          const updatedCoins = this.userInfo.coins + plan.coins;
          
          // 通过Vuex更新用户金币数量
          this.$store.commit('user/SET_USER_INFO', {
            ...this.userInfo,
            coins: updatedCoins
          });
          
          // 显示支付成功提示
          uni.showToast({
            title: '充值成功',
            icon: 'success'
          });
          
          // 关闭弹窗
          this.closeRechargeModal();
          
          // 触发充值成功事件
          this.$emit('recharge-success', {
            plan: this.selectedPlan,
            amount: plan.price,
            coins: plan.coins,
            totalCoins: updatedCoins
          });
        } else {
          // 支付失败
          uni.showToast({
            title: '支付失败，请重试',
            icon: 'none'
          });
        }
      }, 1500);
    },
    
    // 显示用户协议
    showTerms() {
      uni.showModal({
        title: '用户充值协议',
        content: '1. 本平台充值的金币仅限于平台内使用，不可提现。\n2. 金币不支持退款，请合理充值。\n3. 充值金币可用于平台内购买虚拟服务和道具。\n4. 未成年用户请在监护人陪同下充值使用。',
        showCancel: false,
        confirmText: '我已了解',
        confirmColor: '#B3F73C'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.recharge-modal {
  width: 650rpx;
  background: rgba(25, 25, 30, 0.95);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 35rpx rgba(0, 0, 0, 0.25);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  &.show-modal {
    transform: scale(1);
    opacity: 1;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: none;
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.5) 0%, rgba(20, 20, 25, 0.5) 100%);
    pointer-events: none;
  }
  
  .recharge-header {
    padding: 25rpx 30rpx;
    position: relative;
    background: rgba(20, 20, 25, 0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1rpx;
      background: rgba(255, 255, 255, 0.1);
      opacity: 0.7;
    }
    
    .recharge-title {
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6rpx;
        width: 0;
        height: 2rpx;
        background: rgba(179, 247, 60, 0.7);
        transition: width 0.5s ease;
        animation: expandWidth 1s forwards 0.3s;
      }
    }
    
    .recharge-close {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
      
      &:active {
        transform: rotate(90deg);
      }
      
      text {
        font-size: 36rpx;
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }
  
  .recharge-content {
    padding: 30rpx;
    
    .coins-status {
      margin-bottom: 25rpx;
      transform: translateX(-50rpx);
      opacity: 0;
      transition: all 0.5s ease;
      
      &.slide-in {
        transform: translateX(0);
        opacity: 1;
      }
      
      .coins-status-card {
        background: rgba(40, 40, 50, 0.4);
        border-radius: 16rpx;
        padding: 18rpx 22rpx;
        display: flex;
        align-items: center;
        border: 1rpx solid rgba(255, 255, 255, 0.08);
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(45, 45, 55, 0.5);
          border-color: rgba(255, 255, 255, 0.15);
        }
        
        .coins-icon {
          width: 60rpx;
          height: 60rpx;
          background: rgba(179, 247, 60, 0.8);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15rpx;
          box-shadow: 0 4rpx 12rpx rgba(179, 247, 60, 0.3);
          
          text {
            font-size: 32rpx;
            color: rgba(30, 30, 40, 0.9);
            
            &.coin-spin {
              display: inline-block;
              animation: coinRotate 3s ease-in-out infinite;
            }
          }
        }
        
        .coins-info {
          flex: 1;
          
          .coins-label {
            font-size: 22rpx;
            color: rgba(255, 255, 255, 0.6);
          }
          
          .coins-value {
            font-size: 32rpx;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
            animation: numberBounce 0.6s ease-out 0.8s both;
          }
        }
      }
    }
    
    .recharge-plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18rpx;
      margin-bottom: 35rpx;
      
      .recharge-plan {
        background: rgba(40, 40, 50, 0.4);
        border-radius: 16rpx;
        padding: 18rpx 12rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        border: 1rpx solid rgba(255, 255, 255, 0.08);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
        animation: fadeInUp 0.5s ease forwards;
        opacity: 0;
        transform: translateY(20rpx);
        
        &:hover {
          background: rgba(45, 45, 55, 0.5);
          transform: translateY(-5rpx);
          border-color: rgba(255, 255, 255, 0.15);
        }
        
        &.selected {
          background: rgba(50, 50, 60, 0.6);
          border-color: rgba(179, 247, 60, 0.6);
          box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
          transform: scale(1.05);
          z-index: 1;
          
          .plan-price {
            animation: heartBeat 1.3s ease-in-out;
          }
        }
        
        &.recommended {
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 16rpx;
            border: 1rpx solid rgba(179, 247, 60, 0.3);
            opacity: 0.5;
            pointer-events: none;
          }
        }
        
        &.newcomer {
          background: rgba(50, 35, 60, 0.4);
          border: 1rpx solid rgba(255, 130, 220, 0.2);
          
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 16rpx;
            background: linear-gradient(135deg, transparent 0%, rgba(255, 130, 220, 0.05) 100%);
            pointer-events: none;
            z-index: -1;
          }
        }
        
        &.selected.newcomer {
          border-color: rgba(255, 130, 220, 0.5);
          box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
        }
        
        .plan-info {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        
        .plan-coins {
          display: flex;
          align-items: center;
          
          .coins-num {
            font-size: 30rpx;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 600;
            margin-right: 2rpx;
          }
          
          .coins-unit {
            font-size: 20rpx;
            color: rgba(255, 255, 255, 0.6);
          }
        }
        
        .plan-price {
          font-size: 26rpx;
          color: rgba(179, 247, 60, 0.9);
          font-weight: 600;
          margin-top: 4rpx;
        }
        
        .plan-bonus {
          font-size: 20rpx;
          color: rgba(255, 180, 50, 0.9);
          margin-top: 6rpx;
          background: rgba(255, 180, 50, 0.1);
          padding: 3rpx 10rpx;
          border-radius: 10rpx;
          
          &.shine {
            background: linear-gradient(90deg, rgba(255, 180, 50, 0.1) 25%, rgba(255, 180, 50, 0.15) 50%, rgba(255, 180, 50, 0.1) 75%);
            background-size: 200% 100%;
            animation: shineEffect 2s infinite linear;
          }
        }
        
        .recommend-tag {
          position: absolute;
          top: 0;
          right: 0;
          background: rgba(179, 247, 60, 0.8);
          color: rgba(30, 30, 40, 0.9);
          font-size: 18rpx;
          padding: 3rpx 8rpx;
          border-radius: 0 16rpx 0 12rpx;
          font-weight: 600;
          animation: wiggle 2s infinite;
        }
        
        .newcomer-tag {
          position: absolute;
          top: 0;
          left: 0;
          background: linear-gradient(to right, rgba(255, 130, 220, 0.8), rgba(170, 100, 255, 0.8));
          color: rgba(255, 255, 255, 0.95);
          font-size: 18rpx;
          padding: 3rpx 8rpx;
          border-radius: 16rpx 0 12rpx 0;
          font-weight: 600;
          animation: pulse 2s infinite;
        }
      }
    }
    
    .recharge-btn-wrapper {
      position: relative;
      margin-bottom: 25rpx;
      transform: translateY(30rpx);
      opacity: 0;
      transition: all 0.5s ease;
      
      &.slide-up {
        transform: translateY(0);
        opacity: 1;
      }
      
      .recharge-btn {
        background: rgba(179, 247, 60, 0.85);
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(30, 30, 40, 0.9);
        font-size: 28rpx;
        font-weight: 600;
        transition: all 0.3s;
        margin-bottom: 15rpx;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4rpx 15rpx rgba(179, 247, 60, 0.3);
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg, 
            rgba(255, 255, 255, 0) 0%, 
            rgba(255, 255, 255, 0.15) 25%, 
            rgba(255, 255, 255, 0.4) 50%, 
            rgba(255, 255, 255, 0.15) 75%, 
            rgba(255, 255, 255, 0) 100%
          );
          z-index: 1;
          transform: skewX(-25deg);
        }
        
        &.btn-shine::before {
          animation: shineButton 1s forwards;
        }
        
        &:active {
          transform: scale(0.98);
          opacity: 0.9;
          box-shadow: 0 2rpx 8rpx rgba(179, 247, 60, 0.2);
        }
      }
      
      .price-bubble {
        position: absolute;
        top: -10rpx;
        right: 20rpx;
        background: rgba(179, 247, 60, 0.8);
        padding: 6rpx 16rpx;
        border-radius: 30rpx;
        transform: translateY(-100%);
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
        
        &.bounce-in {
          animation: bounceIn 0.6s ease-out;
        }
        
        .bubble-text {
          color: rgba(30, 30, 40, 0.9);
          font-size: 20rpx;
          font-weight: 600;
          display: flex;
          align-items: center;
          
          .sparkle-wrapper {
            margin-left: 5rpx;
            animation: sparkle 2s infinite;
            
            .sparkle-star {
              font-size: 18rpx;
            }
          }
        }
        
        .bubble-arrow {
          position: absolute;
          bottom: -6rpx;
          right: 30rpx;
          width: 0;
          height: 0;
          border-left: 6rpx solid transparent;
          border-right: 6rpx solid transparent;
          border-top: 6rpx solid rgba(179, 247, 60, 0.8);
        }
      }
      
      .terms {
        text-align: center;
        font-size: 20rpx;
        color: rgba(255, 255, 255, 0.5);
        
        &.fade-in {
          animation: fadeIn 1s ease 0.5s forwards;
          opacity: 0;
        }
        
        .terms-link {
          color: rgba(179, 247, 60, 0.85);
          position: relative;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -2rpx;
            left: 0;
            width: 0;
            height: 1rpx;
            background-color: rgba(179, 247, 60, 0.5);
            transition: width 0.3s ease;
          }
          
          &:hover::after {
            width: 100%;
          }
        }
      }
    }
  }
}

/* 动画关键帧定义 */
@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% { transform: scale(0.3) translateY(-100%); opacity: 0; }
  50% { transform: scale(1.1) translateY(-100%); }
  70% { transform: scale(0.9) translateY(-100%); }
  100% { transform: scale(1) translateY(-100%); opacity: 1; }
}

@keyframes glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes coinRotate {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes btnPulse {
  0% { box-shadow: 0 0 0 0 rgba(179, 247, 60, 0.6); }
  70% { box-shadow: 0 0 0 10rpx rgba(179, 247, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(179, 247, 60, 0); }
}

@keyframes pulseBorder {
  0% { box-shadow: 0 0 0 0 rgba(179, 247, 60, 0.4); }
  70% { box-shadow: 0 0 0 10rpx rgba(179, 247, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(179, 247, 60, 0); }
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes shineEffect {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes expandWidth {
  0% { width: 0; }
  100% { width: 60%; }
}

@keyframes gradientShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

@keyframes numberBounce {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shineButton {
  0% {
    left: -100%;
    opacity: 0.7;
  }
  100% {
    left: 150%;
    opacity: 0.7;
  }
}

@keyframes pulse {
  0% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.8; transform: scale(1); }
}
</style> 